<template>
  <div id="app">
    <div id="top" style="margin-bottom:30px">
      <div>
        患者姓名
        <el-select
          v-model="id"
          @change="getMessage()"
          placeholder="请选择"
          style="width:230px;margin-right:20px;"
        >
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>患者卡号
        <el-input placeholder="请输入内容" v-model="kahao" style="width:230px;margin-right:20px"></el-input>患者年龄
        <el-input placeholder="请输入内容" v-model="age" style="width:230px;margin-right:20px"></el-input>出生日期
        <el-date-picker
          v-model="birthday"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          style="margin-right:20px;width:230px"
        ></el-date-picker>
      </div>
      <div>
        患者性别
        <el-input placeholder="请输入内容" v-model="sex" style="width:230px;margin-right:20px"></el-input>手机号码
        <el-input placeholder="请输入内容" v-model="phone" style="width:230px;margin-right:20px"></el-input>证件号码
        <el-input placeholder="请输入内容" v-model="idcard" style="width:230px;margin-right:20px"></el-input>接诊类型
        <el-select v-model="jiezhentype" placeholder="请选择" style="width:230px">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>
        患者地址
        <el-cascader :options="options2" clearable style="width:230px"></el-cascader>
        <el-input placeholder="请输入详细地址" v-model="address" style="width:950px;margin-right:20px"></el-input>
      </div>诊断
      <el-input
        placeholder="请输入内容"
        v-model="zhenduan"
        style="width:550px;margin-right:20px;margin-left:30px"
      ></el-input>医嘱
      <el-input placeholder="请输入内容" v-model="yizhu" style="width:580px;margin-right:20px"></el-input>
    </div>
    <div id="right" style="float:right;width:450px;">
      药品分类：
      <el-select v-model="typename" placeholder="请选择" style="width:350px">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>药品名称：
      <el-input placeholder="请输入药品名称" v-model="yname" style="width:240px;margin-right:20px"></el-input>
      <el-button @click="getYnameList()" type="primary">查询</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="yname" label="名称" width="120"></el-table-column>
        <el-table-column prop="guige" label="规格" width="100"></el-table-column>
        <el-table-column prop="number" label="库存" width="100"></el-table-column>
        <el-table-column prop="price" label="价格" width="80"></el-table-column>
      </el-table>
      <el-button @click="addYaoPin()" type="primary">添加药品</el-button>
    </div>
    <div id="left" style="float:left">
      <el-table
        ref="multipleTable"
        :data="tableData1"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="groupname" label="名称" width="120"></el-table-column>
        <el-table-column prop="yongliang" label="单次用量" width="100"></el-table-column>
        <el-table-column prop="yongfa" label="用法" width="100"></el-table-column>
        <el-table-column prop="pindu" label="频度" width="80"></el-table-column>
        <el-table-column prop="tianshu" label="天数" width="80"></el-table-column>
        <el-table-column prop="zongliang" label="总量" width="80"></el-table-column>
        <el-table-column prop="danjia" label="单价" width="80"></el-table-column>
      </el-table>
      <el-button @click="shouFei()" type="primary">收费</el-button>

      <el-dialog title="请付款" :visible.sync="dialogFormVisible" width="20%">
        <canvas id="q"></canvas>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",

  methods: {
    getUsers() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:8085/users/getUserMessage"
      }).then(function(res) {
        console.log("获取就诊人列表：{}", res);
        $this.options = res.data.obj;
      });
    },
    getMessage() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:8085/users/getUserMessage",
        params: { id: this.id }
      }).then(function(res) {
        console.log("获取就诊人信息：{}", res);
        $this.kahao = res.data.obj.kahao;
        $this.age = res.data.obj.age;
        $this.sex = res.data.obj.sex;
        $this.birthday = res.data.obj.birthday;
        $this.phone = res.data.obj.phone;
        $this.idcard = res.data.obj.idcard;
      });
    },

    getYnameList() {
      this.tableData1 = null;
      this.getYaoPinList();
    },
    getNationList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:8085/nation/getNationList"
      }).then(function(res) {
        console.log("获取省市区信息：{}", res);
        $this.options2 = res.data.obj;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.yaopinname = "";
      console.log("复选药品信息：{}", val);
      for (let index = 0; index < val.length; index++) {
        this.yaopinname += val[index].yname + ",";
      }
      console.log("药品名称为:{}", this.yaopinname);
    },

    getYaoPinList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:8085/yaopin/getYaoPinList",
        params: { yname: this.yname }
      }).then(function(res) {
        console.log("获取药品信息：{}", res);
        $this.tableData = res.data.obj;
      });
    },

    addYaoPin() {
      if (this.yaopinname.length != 0) {
        var $this = this;
        this.axios({
          method: "get",
          url: "http://localhost:8085/chufang/getChuFangList",
          params: { yaopinname: this.yaopinname }
        }).then(function(res) {
          console.log("获取处方药列表：{}", res);
          $this.tableData1 = res.data.obj;
        });
      } else {
        alert("请选择药品");
        return;
      }
    },

    handleSelectionChange1(val) {
      this.multipleSelection = val;
      this.saleCount = 0;
      for (let index = 0; index < val.length; index++) {
        this.saleCount += val[index].danjia;
      }
      console.log("药品总价为:{}", this.saleCount);
    },

    shouFei() {
      if (this.saleCount != null) {
        var canvas = document.getElementById("q");
        var $this = this;
        this.axios({
          method: "post",
          url: "http://localhost:8085/alibaba/createPayOrder",
          params: {
            orderNo: 2020022519990730,
            saleCount: this.saleCount,
            yaopinname: this.yaopinname
          }
        }).then(function(res) {
          console.log("生成支付宝扫码二维码返回信息为{}", res);
          $this.dialogFormVisible = true;
          $this.QRCode.toCanvas(canvas, res.data.obj, function(error) {
            if (error) {
              console.error(error);
            }
            console.log("QRCode success!");
          });
        });
      } else {
        alert("请选择购买药品");
        return;
      }
    }
  },

  data() {
    return {
      msg: "Welcome to Your Vue.js App",

      options: [],
      options1: [
        {
          value: "初诊",
          label: "初诊"
        },
        {
          value: "复诊",
          label: "复诊"
        }
      ],
      options3: [
        {
          value: "全部分类",
          label: "全部分类"
        },
        {
          value: "常用药品",
          label: "常用药品"
        },
        {
          value: "西药",
          label: "西药"
        },
        {
          value: "感冒类",
          label: "感冒类"
        },
        {
          value: "材料",
          label: "材料"
        }
      ],
      jiezhentype: "",
      id: "",
      kahao: "",
      age: "",
      birthday: "",
      sex: "",
      phone: "",
      idcard: "",
      address: "",
      zhenduan: "",
      yizhu: "",
      options2: [],
      tableData: [],
      multipleSelection: [],
      tableData1: [],
      yaopinname: "",
      saleCount: null,
      dialogFormVisible: false,
      typename: "",
      yname: ""
    };
  },
  mounted() {
    this.getUsers();
    this.getNationList();
    this.getYaoPinList();
  }
};
</script>
